<template>
    <h-section title="业务需求过程产出" collapse>
        <div class="section-body">
            <dl v-for="(val, key, index) in fileGroup" :key="index">
                <dd class="label">{{ key }}：</dd>
                <dt class="cont">
                    <file-cell :border="false" :span="24" :fileList="val" />
                </dt>
            </dl>
        </div>
    </h-section>
</template>

<script lang="ts">
import FileCell from '@/components/FileCell/index.vue';
import { FileItem } from '@/types';
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
    name: 'RequireProcess',
    components: {
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    setup(props) {
        const fileGroup = ref({});
        const normalizeFileList = () => {
            const obj = {};
            // 分组
            if (props.detail.selfRequestFiles) {
                props.detail.selfRequestFiles.forEach((item: FileItem) => {
                    let type = '需求受理信息';
                    if (['发起需求', '需求受理信息'].includes(item.connectType)) {
                        type = item.connectType;
                    }
                    obj[type] = obj[type] || [];
                    obj[type].push(item);
                });
                fileGroup.value = obj;
            }
        };
        watch(
            () => props.detail,
            (n) => {
                if (n && n.id) {
                    normalizeFileList();
                }
            },
            { immediate: true, deep: true }
        );
        return {
            fileGroup
        };
    }
});
</script>
<style lang="less" scoped>
.section-body {
    font-size: 14px;
    .label {
        color: @caption-font-color;
    }
    .cont {
        color: @body-font-color;
    }
}
</style>
